<style src="@/css/components/table.css"></style>
<style src="@/css/components/popover.css"></style>
<style src="@/css/components/button.css"></style>
<style src="@/css/components/main.css"></style>

<style>
/* @import '../../css/components/table.css';
@import '../../css/components/button.css';
@import '../../css/components/popover.css';
@import '../../css/components/main.css'; */
.test-papers{
    background:#fff;
    padding:30px;
}
.test-papers-header {
    display: flex;
    justify-content: space-between;
    padding-bottom: 20px;
}

.pages {
    margin-top: 30px;
}

.el-icon-caret-top:before,.el-icon-caret-bottom:before {
    content: ""
}

</style>
<!--试卷题库列表-->
<template>
    <section class="test-papers" v-if="show">
            <div class="test-papers-header">
                <el-button type="primary" class="showdow" @click="gotoPath('/effect/create-paper')" >创建试卷</el-button>
                <el-input
                    placeholder="请输入试卷名称"
                    suffix-icon="el-icon-search"
                    class="search"
                    v-model="keywords">
                </el-input>
            </div>

            <el-table :data="libList" style="width: 100%" class="newTab first-table" @sort-change="rankFn">
                <el-table-column  label="名称" min-width="20%">
                    <template slot-scope="scope">
                        <el-popover
                            popper-class="popover"
                            placement="top-start"
                            width="200"
                            trigger="hover"
                            :content="scope.row.ExamTitle">
                            <span slot="reference">{{scope.row.ExamTitle.substr(0,10)}}</span>
                        </el-popover>
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="CateName" label="知识体系" min-width="20%"></el-table-column> -->
                <el-table-column label="描述" min-width="20%">
                    <template slot-scope="scope">
                        <el-popover
                            popper-class="popover"
                            placement="top-start"
                            width="200"
                            trigger="hover"
                            :content="scope.row.ExamDesc">
                            <span slot="reference">{{scope.row.ExamDesc.substr(0,20)}}</span>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column prop="CreateTime" label="创建时间" sortable="custom" min-width="20%"></el-table-column>
                <el-table-column label="操作" min-width="20%">
                    <template slot-scope="scope">
                        <span class="operate" @click="deleteFn(scope.row.ExamLibID)">删除</span>
                        <router-link tag="span" :to="{ path: '/effect/edit-paper', query: { ExamLibID: scope.row.ExamLibID }}" class="operate">编辑</router-link>
                        <router-link tag="span" :to="{ path: '/effect/paper-detail', query: { ExamLibID: scope.row.ExamLibID, type:0 }}" class="operate">详情</router-link>
                    </template>
                </el-table-column>
            </el-table>


            <pageModel class="pages newPage" :total="total" :page="page" @changePageSize="getPageSize" @changePage="getPage" v-if="total >= 10"></pageModel>

            <!-- 弹窗区 -->
            <el-dialog
                title="提示"
                :visible.sync="deletePapers"
                class="new-dialog"
                width="480px"
                :before-close="handleClose">
                <div class="cont">试卷删除后，将无法恢复</div>
                <span slot="footer" class="dialog-footer">
                    <el-button type="text no-border" @click="deletePapers = false">取消</el-button>
                    <el-button type="primary"  class="add" @click="delExam">确 定</el-button>
                </span>
            </el-dialog>
    </section>

    <div class="test-papers no-temporarily" v-else>
        <img src="../../images/ic-default.png" alt="">
        <p>即将上线，敬请期待</p>
    </div>
</template>

<script>

	import qs from 'qs'
    import pageModel from "components/pageModel.vue"

	export default{
		data: function(){
			return {
                show:false,
                order:"desc",
				libList:[],
				keywords:'',
                path:[
                    {
                        name:'效果评估',
                        path:'/effect/test-papers'
                    },
                    {
                        name:'试卷库'
                    }
                ],
				pageSize:10,
                page:1,
                total:0,
                ExamLibID:'',
                deletePapers:false
            }
		},
		mixins: [mixinMethods],
        watch:{
            keywords() {
                this.page = 1
                this.getTableList()
            }
        },
        components:{
            pageModel
        },

		methods: {
            getTableList(){
				axios.post('/com/exam/getLibList', qs.stringify({
					keywords:this.keywords,
					pagesize:this.pageSize,
					page: this.page,
                    createOrder:this.order
				})).then( (res) => {
					var d = res.data;
					if(d.flag == 1){
						this.libList = d.data.Rows;
						this.total = Number(d.data.Total);
					}else{
						this.$message.error(d.msg);
					}
				} );
            },

            // 当前显示条数发生改变
            getPageSize(value) {
                this.pageSize = value
                this.getTableList()
            },

            // 当前分页改变
            getPage(value) {
                this.page = value
                this.getTableList()
            },

            deleteFn(id) {
                this.ExamLibID = id
                this.deletePapers= true
            },

            // 删除
            delExam() {
                axios.post('/com/exam/delExam', qs.stringify({
                    ExamLibID:this.ExamLibID
                })).then( (res) => {
                    var d = res.data;
                    if(d.flag == 1){
                        this.page = 1
                        this.getTableList()
                        this.deletePapers = false
                    }
                })

            },

            rankFn(value) {
                this.order = (value.order  == 'ascending' ? 'asc' : 'desc')
                this.getTableList()
            }

		},
		mounted: function(){
           this.getTableList();
            // 设置面包屑
            this.$store.commit('setPath', this.path)

		}
	}


</script>
